<template>
	<wd-popup v-model="dialogVisible" custom-style="width:80%; height:60%" lock-scroll>
		<uni-list>
			<uni-list-item showExtraIcon="true" title="发送人">
				<template v-slot:footer>
					<view class="mr-12 font-extralight">{{ detailData.templateNickname }}</view>
				</template>
			</uni-list-item>
			<uni-list-item showExtraIcon="true" title="发送时间">
				<template v-slot:footer>
					<view class="mr-12 font-extralight">{{ formatDate(detailData.createTime) }}</view>
				</template>
			</uni-list-item>
			<uni-list-item showExtraIcon="true" title="消息类型">
				<template v-slot:footer>
					<view class="mr-12 font-extralight">
						<wd-tag custom-class="space"
							:type="getDictColor(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, detailData.templateType)">
							{{ getDictLabel(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, detailData.templateType) }}
						</wd-tag>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showExtraIcon="true" title="是否已读">
				<template v-slot:footer>
					<view class="mr-12 font-extralight">
						<wd-tag custom-class="space" type="primary">
							{{ detailData.readStatus === true || detailData.readStatus === 'true' ? '是' : '否' }}
						</wd-tag>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item showExtraIcon="true" title="阅读时间" v-if="detailData.readStatus">
				<template v-slot:footer>
					<view class="mr-12 font-extralight">{{ formatDate(detailData.readTime) }}</view>
				</template>
			</uni-list-item>
			<uni-list-item showExtraIcon="true">
				<template v-slot:header>
					<view class="custom-title">内容</view>
				</template>
				<template v-slot:footer>
					<view class="mr-12 font-extralight"> {{ detailData.templateContent }}</view>
				</template>
			</uni-list-item>
			<uni-list-item showExtraIcon="true">
				<template v-slot:header>
					<view class="custom-title">附件</view>
				</template>
				<template v-slot:footer>

					<view class="mr-12 font-extralight whitespace-normal break-all w-full leading-relaxed"
						v-if="detailData.attachments" @click="previewFile(detailData.attachments)">
						{{ getFileName(detailData.attachments)}}
					</view>
					<view class="mr-12 font-extralight" v-else> 暂无附件 </view>
				</template>
			</uni-list-item>

		</uni-list>
	</wd-popup>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import { DICT_TYPE, getDictLabel, getDictColor, getBoolDictOptions } from '@/utils/dict'
	import { previewFile } from '@/utils/fileUtils'
	import { formatPast2, formatDate } from '@/utils/formatTime'
	import * as NotifyMessageApi from '@/api/system/notify/message'

	defineOptions({ name: 'MyNotifyMessageDetailDetail' })
	const dialogVisible = ref(false) // 弹窗的是否展示
	const previewDialogVisible = ref(false) // 预览弹窗的是否展示
	const detailLoading = ref(false) // 表单的加载中  
	const detailData = ref({} as NotifyMessageApi.NotifyMessageVO) // 详情数据
	const previewUrl = ref('') // 预览的URL
	const isPreviewablePdf = ref(false) // 是否可以直接预览的PDF
	/** 打开弹窗 */
	const open = async (data : NotifyMessageApi.NotifyMessageVO) => {
		console.log('打开');
		dialogVisible.value = true
		// 设置数据
		detailLoading.value = true
		try {
			detailData.value = data
		} finally {
			detailLoading.value = false
		}
	}
	const getFileName = (url : string) : string => {
		return url.split('/').pop() || ''
	}
	/** 处理预览 */
	const handlePreview = (url : string) => {
		if (!url) return

		previewUrl.value = url
		// 检查文件类型是否为PDF
		isPreviewablePdf.value = url.toLowerCase().endsWith('.pdf')

		// 如果不是PDF，可以尝试使用在线预览服务
		if (!isPreviewablePdf.value) {
			// 尝试使用Office Online预览服务（如果是Office文档）
			const isOfficeFile = /\.(docx?|xlsx?|pptx?|pdf)$/i.test(url)
			if (isOfficeFile) {
				previewUrl.value = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
				isPreviewablePdf.value = true
			}
		}

		previewDialogVisible.value = true
	}

	/** 下载文件 */
	const downloadFile = () => {
		if (previewUrl.value) {
			window.open(previewUrl.value, '_blank')
		}
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style>
	.custom-title {
		width: 60px;
		margin-left: 10px;
		flex-shrink: 0;
		white-space: nowrap;
		padding-top: 4rpx;
	}
</style>